<template>
  <el-dialog title="选择商品" :modal-append-to-body="true" :append-to-body="true" v-model="dialogVisible"
    @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="70%">
    <div class="common-seach-wrap">
      <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" @change="getData" v-model="formInline.productName">
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="商品类型">
          <el-select style="width:200px" :disabled="disabledType" clearable size="small" @change="onFilterChnage"
            v-model="formInline.productType">
            <el-option v-for="(item, index) in productTypes" :key="index" :label="item.name"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-button icon="Search" @click="getData" size="small" style="margin-top: -13px;">查询</el-button>
        <!-- <el-button size="small" type="primary" style="margin-top: -13px;" @click="SingleFunc()">选择</el-button> -->
      </el-form>
    </div>
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="productList" border style="width: 100%" highlight-current-row v-loading="loading"
          @selection-change="tableCurrentChange">
          <el-table-column min-width="115" fixed label="商品图片">
            <template #default="scope" style="text-align: center;">
              <img v-img-url="scope.row.imagePath" :width="100" :height="100" />
            </template>
          </el-table-column>
          <!-- <el-table-column prop="productType" label="商品类型" width="100">
            <template #default="scope">
              <el-tag>{{ filterTypeName(scope.row.productType) }}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column min-width="130" fixed prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="categoryParentName" label="品种" width="80"></el-table-column>
          <el-table-column prop="categoryName" width="100" label="商品分类"></el-table-column>
          <el-table-column prop="spec" label="商品规格" width="280">
            <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
          </el-table-column>
          <el-table-column prop="stockNum" label="库存" width="80" />
          <el-table-column prop="productPrice" label="单价" width="130">
            <template #default="scope">￥{{ scope.row.productPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="tenThousandPrice" label="满一万单价" width="130">
            <template #default="scope">￥{{ scope.row.tenThousandPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="lakhPrice" label="满十万单价" width="130">
            <template #default="scope">￥{{ scope.row.lakhPrice || '0.00' }}</template>
          </el-table-column>
          <el-table-column prop="depositRatio" label="定金比例" width="130" />

          <el-table-column prop="produceAddressTxt" label="种植基地" width="130" />
          <el-table-column type="selection" fixed='right' :selectable="selectableFunc" width="44"
            v-if="islist"></el-table-column>
          <el-table-column width="80" fixed='right' label="单选" v-if="!islist">
            <template #default="scope">
              <el-button size="small" @click="SingleFunc(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          :current-page="curPage" :page-sizes="[2, 10, 20, 50, 100]" :page-size="pageSize"
          layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addClerk" v-if="islist">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PorductApi from "@/api/product.js";
import OrderApi from "@/api/order.js";
export default {
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*当前是第几页*/
      curPage: 1,
      /*一页多少条*/
      pageSize: 10,
      /*一共多少条数据*/
      totalDataNumber: 0,
      formInline: {},
      //商品分类列表
      categoryList: [],
      //商品列表
      productList: [],
      productAdressData: [],
      //类别列表
      status: [
        {
          id: 10,
          name: "上架",
        },
        {
          id: 20,
          name: "下架",
        },
      ],
      multipleSelection: [],
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      /*结果类别*/
      type: "error",
      /*传出去的参数*/
      params: null,
      productTypes: [
        { name: '普通商品', value: 1 },
        { name: '拼团活动', value: 2 },
        { name: '秒杀活动', value: 3 },
        { name: '预售活动', value: 4 },
        { name: '进口苗活动', value: 5 },
        { name: '特惠活动', value: 6 },
      ],
    };
  },
  props: ["isProduct", "islist", 'defaultCateId', 'productType', 'disabledType'],
  watch: {
    isProduct: function (n, o) {
      if (n != o) {
        if (n) {
          this.dialogVisible = n;
          this.type = "error";
          this.params = null;
          this.getData();
        }
      }
    },
    defaultCateId: {
      immediate: true,
      handler(n, v) {
        if (n && n !== -1) {
          this.formInline.categoryId = n
        }
      }
    },
    productType: {
      immediate: true,
      deep: true,
      handler(n, v) {
        if (n) {
          this.formInline.productType = n
        }
      }
    }
  },
  created() { },
  methods: {
    /*是否可以勾选*/
    selectableFunc(e) {
      if (typeof e.noChoose !== "boolean") {
        return true;
      }
      return e.noChoose;
    },
    onFilterChnage() {
      this.curPage = 1;
      this.getData();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      this.curPage = val;
      this.getData();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getData();
    },
    filterTypeName(value) {
      const item = this.productTypes.find(f => f.value === value)
      if (item)
        return item.name
      return ''
    },
    /*获取商品列表*/
    getData() {
      let self = this;
      self.loading = true
      let params = self.formInline;
      params.pageIndex = self.curPage;
      params.pageSize = self.pageSize;
      //  注释点之前的接口
      PorductApi.chooseLists(params, true)
        .then((res) => {
          self.loading = false
          if (res.code == 1) {
            self.loading = false;
            self.productAdressData = res.data.produceAddrList
            self.categoryList = res.data.categoryList
            // self.productList = res.data.productList.records;
            // self.totalDataNumber = res.data.productList.total;
          }
        })
        .catch((error) => {
          self.loading = false
        });
      OrderApi.getSkuProducts(params, true)
        .then((res) => {
          self.loading = false
          const { code, data } = res;
          if (code == 1) {
            self.loading = false;
            self.productList = data.records;
            self.totalDataNumber = data.total;
          }
        })
    },

    /*单选*/
    SingleFunc(row) {
      // if (this.multipleSelection && !this.multipleSelection.length) {
      //   ElMessage({
      //     message: "请至少选择一件产品商品！",
      //     type: "error",
      //   });
      //   return;
      // }
      this.multipleSelection = [row];
      this.addClerk();
    },

    //点击确定
    addClerk() {
      let self = this;
      let params = null;
      let type = "success";
      if (self.multipleSelection.length < 1) {
        ElMessage({
          message: "请至少选择一件产品商品！",
          type: "error",
        });
        return;
      }
      if (self.islist && typeof self.islist != "undefined") {
        self.multipleSelection.forEach((item) => {
          item.image = item.imagePath;
        });
        params = self.multipleSelection;
      } else {
        params = self.multipleSelection[0];
        console.log("1", self.multipleSelection);
        params.image = params.imagePath;
      }
      self.params = params;
      self.type = "success";
      self.dialogVisible = false;
    },

    /*关闭弹窗*/
    dialogFormVisible() {
      this.$emit("closeDialog", {
        type: this.type,
        openDialog: false,
        params: this.params,
        adressData: this.productAdressData
      });
    },

    /*监听复选按钮选中事件*/
    tableCurrentChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.no-list .el-checkbox {
  display: none;
}
</style>
